<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"
    />
    <title>电子名片</title>
    <link rel="icon" href="./favicon.png" />
    <link rel="stylesheet" href="../common/css/reset.css" />
    <link rel="stylesheet" href="./css/index.css" />
  </head>
  <body>
    <!-- 用户信息 -->
    <div id="app">
      <!-- 我的名片 -->
      <div class="panel-content">
        <div class="card-container" id="cardContainer">
          <div
            class="card-box"
            style="background-image: url(./images/card-bg-1.png)"
          >
            <div class="card-top">
              <div class="line">
                <p class="text-name">王小明</p>
                <p class="text-position">经理</p>
              </div>
              <p class="text-company">河北中废通网络技术公司</p>
            </div>
            <div class="card-bottom">
              <div class="line">
                <img src="./images/icon-tel.png" class="card-icon" />
                <p class="text">13888888888</p>
              </div>
              <div class="line">
                <img src="./images/icon-add.png" class="card-icon" />
                <p class="text">河北省石家庄市长安区乐汇城C座</p>
              </div>
            </div>
          </div>
          <div
            class="card-box back"
            style="background-image: url(./images/card-bg-1.png)"
          >
            <p class="card-title">主营产品</p>
            <p class="label label-product">废旧物资，再生塑料，二手设备</p>
          </div>
        </div>
      </div>
      <!-- 没有权限 -->
      <div class="no-permission" hidden>
        <div class="icon">!</div>
        <p class="text">暂无权限</p>
      </div>
    </div>
    <script>
      let scale = 1;
      const width = document.body.clientWidth - 32;
      if (width > 462) {
        scale = 1;
      } else {
        scale = (width / 462).toFixed(2);
        document.getElementById(
          "cardContainer"
        ).style.transform = `scale(${scale})`;
      }
    </script>
  </body>
</html>
